<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API连接测试工具</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 1000px; margin: 0 auto; padding: 20px; line-height: 1.6; }
        h1 { color: #333; }
        .test-section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; }
        button { padding: 8px 15px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; margin-right: 10px; }
        button:hover { background-color: #45a049; }
        .log-box { margin-top: 15px; padding: 10px; background-color: #f5f5f5; border: 1px solid #ddd; border-radius: 4px; height: 300px; overflow-y: auto; font-family: monospace; white-space: pre-wrap; }
        input[type="text"] { padding: 8px; width: 300px; margin-right: 10px; }
        .status { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: bold; }
        .status-success { background-color: #d4edda; color: #155724; }
        .status-error { background-color: #f8d7da; color: #721c24; }
        .status-pending { background-color: #fff3cd; color: #856404; }
        table { border-collapse: collapse; width: 100%; margin-top: 10px; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
        .highlight { color: #ff6b6b; font-weight: bold; }
    </style>
</head>
<body>
    <h1>AI问答服务API连接测试工具</h1>
    <p>这个工具将帮助您诊断为什么AI聊天没有响应。请点击下面的按钮进行测试。</p>

    <div class="test-section">
        <h2>环境信息</h2>
        <div id="env-info" class="log-box"></div>
    </div>

    <div class="test-section">
        <h2>网络连通性测试</h2>
        <button onclick="testConnectivity()">测试网络连通性</button>
        <div id="connectivity-log" class="log-box"></div>
    </div>

    <div class="test-section">
        <h2>API路径测试</h2>
        <p>测试不同的API路径组合，查看哪个可以正常工作：</p>
        <table id="path-tests">
            <thead>
                <tr>
                    <th>路径</th>
                    <th>状态</th>
                    <th>响应时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="path-results"></tbody>
        </table>
        <div id="path-log" class="log-box"></div>
    </div>

    <div class="test-section">
        <h2>直接API调用测试</h2>
        <input type="text" id="test-question" value="你好，这是一个测试问题">
        <button onclick="testDirectAPI()">测试直接API调用</button>
        <div id="direct-api-log" class="log-box"></div>
    </div>

    <div class="test-section">
        <h2>问题诊断</h2>
        <div id="diagnostics" class="log-box"></div>
    </div>

    <script>
        // 基础URL配置
        const BASE_URLS = [
            '/ai-service', // 使用代理路径，避免跨域问题
            'http://127.0.0.1:9205', // 直接后端地址(备用)
            window.location.origin    // 当前页面域名
        ];
        
        // 可能的API路径组合
        const API_PATHS = [
            '/ai/api/chat',
            '/api/chat',
            '/api/ai/chat',
            '/chat',
            '/ai/chat'
        ];

        // 打印到日志框
        function logToBox(elementId, message) {
            const box = document.getElementById(elementId);
            const timestamp = new Date().toLocaleTimeString();
            box.innerHTML += `[${timestamp}] ${message}\n`;
            box.scrollTop = box.scrollHeight;
        }

        // 清除日志框
        function clearBox(elementId) {
            document.getElementById(elementId).innerHTML = '';
        }

        // 显示环境信息
        function showEnvironmentInfo() {
            const info = document.getElementById('env-info');
            info.innerHTML = `
                浏览器: ${navigator.userAgent}
                当前页面: ${window.location.href}
                域 名: ${window.location.origin}
                IP地址(推测): ${getClientIP() || '无法获取'}
                时间戳: ${new Date().toLocaleString()}
            `;
        }

        // 获取客户端IP（简单推测）
        function getClientIP() {
            try {
                return window.location.hostname;
            } catch (e) {
                return null;
            }
        }

        // 测试网络连通性
        async function testConnectivity() {
            clearBox('connectivity-log');
            logToBox('connectivity-log', '开始测试网络连通性...');

            // 测试到代理服务的连接
            try {
                const startTime = performance.now();
                logToBox('connectivity-log', '测试AI服务代理连接...');
                // 使用代理路径进行GET请求测试
                await fetch('/ai-service/ai/api/chat', { 
                    method: 'POST', 
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ question: 'test', timestamp: Date.now() }),
                    timeout: 5000 
                });
                const endTime = performance.now();
                logToBox('connectivity-log', `✓ AI服务代理连接成功 (响应时间: ${Math.round(endTime - startTime)}ms)`);
            } catch (error) {
                logToBox('connectivity-log', `✗ AI服务代理连接失败: ${error.message}`);
                logToBox('connectivity-log', '  可能的原因: 后端服务未启动、端口错误或配置问题');
            }

            // 简化的当前站点测试
            try {
                // 检查当前页面是否能访问自身资源
                const testImage = new Image();
                testImage.src = '/favicon.ico';
                const testPromise = new Promise((resolve, reject) => {
                    testImage.onload = resolve;
                    testImage.onerror = reject;
                    setTimeout(() => reject(new Error('超时')), 2000);
                });
                await testPromise;
                logToBox('connectivity-log', '✓ 当前站点资源访问正常');
            } catch (error) {
                logToBox('connectivity-log', '✗ 当前站点资源访问异常: ' + error.message);
            }

            logToBox('connectivity-log', '网络连通性测试完成');
        }

        // 测试所有API路径
        async function testAllPaths() {
            clearBox('path-log');
            const resultsTable = document.getElementById('path-results');
            resultsTable.innerHTML = '';
            
            logToBox('path-log', '开始测试所有可能的API路径组合...');
            
            const allPaths = [];
            for (const baseUrl of BASE_URLS) {
                for (const path of API_PATHS) {
                    allPaths.push(`${baseUrl}${path}`);
                }
            }

            for (const fullPath of allPaths) {
                addPathTestRow(fullPath);
                await testSinglePath(fullPath);
            }
            
            logToBox('path-log', 'API路径测试完成');
        }

        // 添加路径测试行
        function addPathTestRow(path) {
            const table = document.getElementById('path-results');
            const row = document.createElement('tr');
            row.id = `row-${path.replace(/[^a-zA-Z0-9]/g, '_')}`;
            row.innerHTML = `
                <td>${path}</td>
                <td><span class="status status-pending">测试中</span></td>
                <td>-</td>
                <td><button onclick="useThisPath('${path}')">使用此路径</button></td>
            `;
            table.appendChild(row);
        }

        // 测试单个路径
        async function testSinglePath(path) {
            const startTime = performance.now();
            
            try {
                logToBox('path-log', `测试路径: ${path}`);
                
                // 发送测试请求
                const response = await fetch(path, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: JSON.stringify({ question: '测试', timestamp: Date.now(), version: '1.0.0' }),
                    timeout: 10000
                });
                
                const endTime = performance.now();
                const responseTime = Math.round(endTime - startTime);
                
                if (response.ok) {
                    logToBox('path-log', `✓ ${path} 访问成功 (状态码: ${response.status}, 响应时间: ${responseTime}ms)`);
                    
                    try {
                        const data = await response.json();
                        logToBox('path-log', `  响应数据: ${JSON.stringify(data).substring(0, 200)}...`);
                    } catch (e) {
                        logToBox('path-log', '  无法解析响应为JSON');
                    }
                } else {
                    logToBox('path-log', `✗ ${path} 访问失败 (状态码: ${response.status}, 响应时间: ${responseTime}ms)`);
                }
            } catch (error) {
                const endTime = performance.now();
                const responseTime = Math.round(endTime - startTime);
                
                logToBox('path-log', `✗ ${path} 测试错误: ${error.message}`);
            }
        }

        // 使用特定路径进行测试
        function useThisPath(path) {
            logToBox('path-log', `\n选择使用路径: ${path} 进行完整测试...`);
            document.getElementById('test-question').value = `测试路径 ${path}`;
            testDirectAPI(path);
        }

        // 直接API调用测试
        async function testDirectAPI(customPath = null) {
            clearBox('direct-api-log');
            const question = document.getElementById('test-question').value;
            const testPath = customPath || '/ai-service/ai/api/chat'; // 使用代理路径
            
            logToBox('direct-api-log', `开始直接API调用测试: ${testPath}`);
            logToBox('direct-api-log', `测试问题: ${question}`);
            
            try {
                const startTime = performance.now();
                
                // 构造请求数据
                const requestData = {
                    question: question,
                    timestamp: Date.now(),
                    version: '1.0.0'
                };
                
                logToBox('direct-api-log', `请求数据: ${JSON.stringify(requestData)}`);
                
                // 发送请求
                const response = await fetch(testPath, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-API-Request-Id': 'req-' + Date.now(),
                        'X-User-Agent': 'AI-Test-Tool/1.0'
                    },
                    body: JSON.stringify(requestData),
                    timeout: 20000
                });
                
                const endTime = performance.now();
                logToBox('direct-api-log', `请求完成 (状态码: ${response.status}, 响应时间: ${Math.round(endTime - startTime)}ms)`);
                
                // 尝试解析响应
                try {
                    const data = await response.json();
                    logToBox('direct-api-log', `响应数据: ${JSON.stringify(data, null, 2)}`);
                    
                    // 显示诊断信息
                    showDiagnostics(testPath, response.status, data);
                } catch (e) {
                    logToBox('direct-api-log', '错误: 无法解析响应为JSON');
                    const text = await response.text();
                    logToBox('direct-api-log', `原始响应: ${text}`);
                    showDiagnostics(testPath, response.status, { error: '无法解析JSON', raw: text });
                }
            } catch (error) {
                logToBox('direct-api-log', `请求异常: ${error.message}`);
                logToBox('direct-api-log', `错误详情: ${error.stack || '无'}`);
                showDiagnostics(testPath, null, { error: error.message, stack: error.stack });
            }
        }

        // 显示诊断信息
        function showDiagnostics(path, statusCode, responseData) {
            const diagnostics = document.getElementById('diagnostics');
            let message = `\n===== 问题诊断报告 =====\n`;
            message += `测试路径: ${path}\n`;
            message += `时间: ${new Date().toLocaleString()}\n\n`;
            
            if (statusCode === 200 && responseData && responseData.success !== false) {
                message += `\u{1F49A} 测试成功！API路径似乎可以正常工作。\n`;
                message += `建议: 请确认您的前端代码使用了正确的路径 ${path}\n`;
                message += `前端代码位置: ruoyi-ui/src/api/ai.js 中的 askAI 函数\n`;
            } else if (statusCode === 404) {
                message += `\u{1F6AB} 错误: 404 Not Found\n`;
                message += `这表示服务器无法找到请求的API路径。\n`;
                message += `可能的原因:\n`;
                message += `1. API路径错误 - 请检查后端Controller中定义的路径\n`;
                message += `2. 后端服务未启动或未正确部署\n`;
                message += `3. 后端服务运行在不同的端口上\n`;
                message += `建议: 请检查后端代码中的@RequestMapping和@PostMapping注解\n`;
            } else if (statusCode === 403 || statusCode === 401) {
                message += `\u{1F6AB} 错误: 认证/授权问题 (${statusCode})\n`;
                message += `可能的原因:\n`;
                message += `1. API需要认证但请求中没有包含认证信息\n`;
                message += `2. 认证信息过期或不正确\n`;
                message += `建议: 检查是否需要在请求头中添加token或其他认证信息\n`;
            } else if (statusCode === 500) {
                message += `\u{1F6AB} 错误: 服务器内部错误 (500)\n`;
                message += `这表示后端服务在处理请求时出现了错误。\n`;
                message += `建议: 检查后端服务的日志以获取详细错误信息\n`;
            } else if (!statusCode) {
                message += `\u{1F6AB} 错误: 无法连接到服务器\n`;
                message += `可能的原因:\n`;
                message += `1. 后端服务未运行\n`;
                message += `2. 防火墙阻止了连接\n`;
                message += `3. 网络配置问题\n`;
                message += `4. 跨域资源共享(CORS)限制\n`;
                message += `建议:\n`;
                message += `1. 确认后端服务正在运行 (端口: 9205)\n`;
                message += `2. 检查后端是否配置了正确的CORS策略\n`;
                message += `3. 尝试使用Postman或curl直接测试API\n`;
            } else {
                message += `\u{1F6AB} 错误: 未知状态码 ${statusCode}\n`;
                message += `请检查后端服务日志以获取更多信息\n`;
            }
            
            message += `\n===== 解决步骤建议 =====\n`;
            message += `1. 确认后端服务是否正在运行在 http://127.0.0.1:9205\n`;
            message += `2. 检查后端Controller中定义的确切API路径\n`;
            message += `3. 检查浏览器控制台是否有跨域错误\n`;
            message += `4. 更新 ruoyi-ui/src/api/ai.js 中的API路径为测试成功的路径\n`;
            message += `5. 如果使用了代理，请确保代理配置正确\n`;
            
            diagnostics.innerHTML = message;
        }

        // 页面加载时执行
        window.onload = function() {
            showEnvironmentInfo();
            testConnectivity();
            // 只测试代理路径，而不是所有可能的路径组合
            testSinglePath('/ai-service/ai/api/chat');
        };
    </script>
</body>
</html>